<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<jsp:include page="menu.jsp"></jsp:include>

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="3; url=${url}">
    <title>异常提示</title>
    <link rel="stylesheet" type="text/css" href="css/error.css" />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style type="text/css">
	body {
  	 	background-image: url("img/error.png");
   		background-size: 1000px;
   		font-family: "Noto Sans SC", sans-serif;
   		text-align: center;
	}
	.container {
		width: 600px; 
		height: 350px;
   	 	margin: 0px auto; /* 上下外边距为30px，左右自动居中 */
		background: #FFF8DC;
		border-radius: 8px; /* 设置表单的圆角半径为8px */
    	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影效果 */
	}
	.ea {
		color: #5bc0de;
	}
	</style>
</head>
<body>
	<div style="height: 150px"></div>
    <div class="container">
    	<div style="height: 30px"></div>
        <p class="message">${msg}</p>
        <p class="tip">系统将在 <span id="time">3</span> 秒后自动跳转到 <a href="${url}" class="ea">${msg1}</a></p>
        <p class="tip">如果没有自动跳转，请点击以下按钮：</p>
        <div style="height: 20px"></div>
        <a href="${url}" class="redirect-btn">立即跳转</a>
    </div>
</body>
<script type="text/javascript">
    // 初始化倒计时时间为 3 秒
    var time = 3;
    // 获取要跳转的 URL
    var url = '${url}';

    // 定义倒计时函数
    function countdown() {
        if (time > 0) {
            // 更新显示的时间
            document.getElementById('time').innerHTML = time;
            time--;
        } else {
            // 倒计时结束，跳转页面
            window.location.href = url;
        }
    }
    // 立即执行一次，以便首次加载时显示正确的时间
    countdown();
    // 每隔 1 秒执行一次倒计时函数
    var interval = setInterval(countdown, 1000);
</script>
</html>
